<template>
    <!-- rank开始    start -->
    <div class="rank clearfix">
        <div class="w rankW clearfix">
            <a href="">
                <i></i>
                <span>热卖排行</span>
            </a>
            <a href="">
                <i></i>
                <span>特价排行</span>
            </a>
            <a href="">
                <i></i>
                <span>新品排行</span>
            </a>
        </div>
        <div class="w content clearfix">
            <ul>
                <li class="content_z">
                    <div class="content_z">
                        <a href="" class="clearfix">
                            <img src="./img/1.jpg" alt="">
                        </a>
                        <div class="content_div">
                            <a href="">
                                <i>【官网价直降1100】Apple iPhone 8 Plus</i>
                                <span>256GB 银色 移动联通电信4G手机</span>
                            </a>
                            <span class="content_span">定金：¥100.00</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="content_z">
                        <a href="">
                            <img src="./img/1.jpg" alt="">
                        </a>
                        <div class="content_div">
                            <a href="">
                                <i>【官网价直降1100】Apple iPhone 8 Plus</i>
                                <span>256GB 银色 移动联通电信4G手机</span>
                            </a>
                            <span class="content_span">定金：¥100.00</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="content_z">
                        <a href="">
                            <img src="./img/1.jpg" alt="">
                        </a>
                        <div class="content_div">
                            <a href="">
                                <i>【官网价直降1100】Apple iPhone 8 Plus</i>
                                <span>256GB 银色 移动联通电信4G手机</span>
                            </a>
                            <span class="content_span">定金：¥100.00</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="content_z">
                        <a href="">
                            <img src="./img/1.jpg" alt="">
                        </a>
                        <div class="content_div">
                            <a href="">
                                <i>【官网价直降1100】Apple iPhone 8 Plus</i>
                                <span>256GB 银色 移动联通电信4G手机</span>
                            </a>
                            <span class="content_span">定金：¥100.00</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- rank结束      end -->
</template>

<script>
export default {
    name:'Rank'
}
</script>

<style lang='less' scoped>
//rank 开始    start
.rank{
    .rankW{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        a{
            display: flex;
            flex-direction: column;
            padding: 0 20px;
            i{
                align-self: center;
                width: 35px;
                height: 35px;
                display: block;
                background: url(./img/bg0.png);
                margin-bottom: 10px;
            }
        }
        &>a:first-child{
            color: #e60012;
            i{
                background-position: -36px;
            }    
        }
        &>a:hover{
            color: blue;
        }
    }    
    .content{
        box-sizing: border-box;
        padding: 0px 30px;
        margin-top: 20px;
        ul{
            display: flex;
            justify-content: space-between;
            li{        
                .content_z{
                    border: 1px solid #e1251b;
                    a{
                        img{
                            margin: 5px 20px 20px  18px;
                            width: 200px;
                            height: 200px;
                        }
                    }
                    .content_div{
                        background: #fafafa;
                        a{
                            display: flex;
                            flex-direction: column;
                            height: 50px;
                            line-height: 28px;
                            i{
                                box-sizing: border-box;
                                padding-left: 5px;
                            }
                            span{
                                box-sizing: border-box;
                                padding-left: 7px;
                            }
                        }
                        .content_span{
                            display: block;
                            box-sizing: border-box;
                            font-size: 20px;
                            color: #e1251b;
                            height: 35px;
                            line-height: 35px;
                            margin:5px 0px 0px 10px
                        }
                    }
                }
            }
        }
    }
}
//rank  结束    end
</style>